<script setup lang="ts">
import {onBeforeMount, ref, watch, computed} from "vue";
import _ from "lodash";
import {addCollect, deleteCollect, getCollectCount} from "@/api/collect/collect";
import {EAction, ECode, iconFontAddress} from "@/util/commonUtil";
import {createFromIconfontCN} from "@ant-design/icons-vue";
import {LikeOutlined, LikeTwoTone, DislikeOutlined, DislikeTwoTone} from "@ant-design/icons-vue"
import {message} from "ant-design-vue";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {v4 as uuidV4} from 'uuid';
import {useSysEventStore} from "@/store/system/SysEventStore";
import {getCookie} from "@/util/cookieUtil";
import {cookieToken} from "@/config/CookieConfig";
import {addPraise, addTread, cancelPraise, cancelTread, getPraiseCount} from "@/api/praise/praise";
import RewardBottom from "@/components/reward/index.vue"
import {useAppConfigStore} from "@/store/system/appConfigStore";

const props = defineProps({
  bizUid: {
    type: String,
    default: ''
  },
  resourceType: {
    type: String,
    default: ''
  },
  // 收藏
  isCollectValue: {
    type: Boolean,
    default: false
  },
  // 赞
  isPraiseValue: {
    type: Boolean,
    default: false
  },
  // 踩
  isTreadValue: {
    type: Boolean,
    default: false
  },
  // 收藏数
  collectCountValue: {
    type: Number,
    default: 0
  },
  // 点赞数
  praiseCountValue: {
    type: Number,
    default: 0
  },
  // 踩数
  treadCountValue: {
    type: Number,
    default: 0
  }
});
const isCollect = ref<boolean>(props.isCollectValue || false)
const collectCount = ref<number>(props.collectCountValue || 0)
const isPraise = ref<boolean>(false)
const praiseCount = ref<number>(props.praiseCountValue || 0)
const isTread = ref<boolean>(props.isTreadValue || false)
const treadCount = ref<number>(props.treadCountValue || 0)
const random = ref<number>(0)
const rewardShow = ref<any>('')
const top = ref<number>(150);
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});
const componentShowMap = computed(() => useAppConfigStore().componentShowMap)
watch(() => props.bizUid, () => {
  checkCollectStatus()
  getUserPraiseCount()
})

onBeforeMount(() => {

})

function rewardShowClick() {
  rewardShow.value = uuidV4();
}

function checkCollectStatus() {
  if (!props.bizUid) {
    return
  }
  if (!_.isUndefined(props.isCollectValue) && !_.isUndefined(props.collectCountValue)) {
    isCollect.value = props.isCollectValue
    collectCount.value = props.collectCountValue
    return;
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.resourceType
  getCollectCount(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let collectData = response.data
      isCollect.value = collectData.isCollect
      collectCount.value = collectData.collectCount
    } else {
      isCollect.value = false
    }
  })
}

function getUserPraiseCount() {
  if (!props.bizUid) {
    return
  }
  // 有值直接返回
  if (props.praiseCountValue && props.treadCountValue) {
    isPraise.value = props.isPraiseValue
    isTread.value = props.isTreadValue
    praiseCount.value = props.praiseCountValue
    treadCount.value = props.treadCountValue
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  getPraiseCount(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let praiseMap = response.data
      isPraise.value = praiseMap.isPraise
      isTread.value = praiseMap.isTread
      praiseCount.value = praiseMap.praiseCount
      treadCount.value = praiseMap.treadCount
    }
  })
}

function collect() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以收藏哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.resourceType
  addCollect(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isCollect.value = true
      collectCount.value = collectCount.value + 1
      // 发送收藏的领域事件
      let event = {
        "type": "action",
        "action": EAction.Collect,
        "resourceUid": props.bizUid,
        "resourceType": props.resourceType,
        "time": new Date(),
      }
      useSysEventStore().setDomainEventMessage(event)
    } else {
      message.error(response.message)
    }
  })
}

function cancelCollect() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以取消收藏哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.resourceType
  deleteCollect(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isCollect.value = false
      collectCount.value = collectCount.value - 1
    } else {
      message.error(response.message)
    }
  })
}

function praise() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以点赞哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  addPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = true
      random.value = Math.random()
      useSysEventStore().setPraiseMessage(random.value)
      praiseCount.value = praiseCount.value + 1
      // 发送点赞的领域事件
      let event = {
        "type": "action",
        "action": EAction.Praise,
        "resourceUid": props.bizUid,
        "resourceType": props.resourceType,
        "time": new Date(),
      }
      useSysEventStore().setDomainEventMessage(event)
    } else {
      message.error(response.message)
    }
  })
}

function cancelUserPraise() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以点赞哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  cancelPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = false
      random.value = Math.random()
      useSysEventStore().setPraiseMessage(random.value)
      praiseCount.value = praiseCount.value - 1
    } else {
      message.error(response.message)
    }
  })
}

function tread() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以踩哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  addTread(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isTread.value = true
      treadCount.value = treadCount.value + 1
      // 发送点赞的领域事件
      let event = {
        "type": "action",
        "action": EAction.Tread,
        "resourceUid": props.bizUid,
        "resourceType": props.resourceType,
        "time": new Date(),
      }
      useSysEventStore().setDomainEventMessage(event)
    } else {
      message.error(response.message)
    }
  })
}

function cancelUserTread() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以踩哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  cancelTread(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isTread.value = false
      treadCount.value = treadCount.value - 1
    } else {
      message.error(response.message)
    }
  })
}
</script>

<template>
  <a-affix :offset-top="top" class="leftNavigationAffix absolute hidden w-14 lg:left-64 lg:block">
    <section class="leftNavigation flex flex-col gap-4">
      <div class="leftPraise" title="点赞" v-if="componentShowMap.showUserPrise">
        <a-badge :count="praiseCount" v-if="!isPraise">
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    size="large"
                    @click="praise">
            <LikeOutlined class="text-rose-500"/>
          </a-button>
        </a-badge>
        <a-badge :count="praiseCount" v-else>
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    size="large"
                    @click="cancelUserPraise">
            <LikeTwoTone/>
          </a-button>
        </a-badge>
      </div>
      <div class="leftTread" title="点踩" v-if="componentShowMap.showUserTread">
        <a-badge :count="treadCount" v-if="!isTreadValue">
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    size="large"
                    @click="tread">
            <DislikeOutlined class="text-rose-500"/>
          </a-button>
        </a-badge>
        <a-badge :count="treadCount" v-else>
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    size="large"
                    @click="cancelUserTread">
            <DislikeTwoTone/>
          </a-button>
        </a-badge>
      </div >
      <div class="leftCollect" title="收藏" v-if="componentShowMap.showUserCollect">
        <a-badge :count="collectCount" v-if="!isCollect">
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    size="large"
                    @click="collect">
            <IconFont type="icon-xiangkan" class="text-rose-500"/>
          </a-button>
        </a-badge>
        <a-badge :count="collectCount" v-else>
          <a-button shape="circle"
                    class="flex items-center justify-center"
                    @click="cancelCollect"
                    size="large">
            <IconFont type="icon-aixin" class="text-rose-500"/>
          </a-button>
        </a-badge>
      </div>
      <a class="leftComment" href="#commentArea" title="评论直达" v-if="componentShowMap.showUserComment">
        <a-button shape="circle"
                  class="flex items-center justify-center"
                  size="large">
          <IconFont type="icon-pinglun" class="text-rose-500"/>
        </a-button>
      </a>
      <div class="leftReward" title="打赏">
        <a-button shape="circle"
                  class="flex items-center justify-center"
                  @click="rewardShowClick"
                  size="large">
          <IconFont type="icon-dashang" class="text-2xl"/>
        </a-button>
      </div>
      <RewardBottom :rewardShow="rewardShow"/>
    </section>
  </a-affix>
</template>

<style scoped lang="less">
:deep(.ant-badge-count) {
  min-width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #999;
}
</style>
